 <template>
  <div>
    <div class="filter-container">
      <el-input placeholder="姓名/电话" v-model="searchData" style="width: 200px;" class="filter-item"/>

      <el-button class="filter-item" icon="el-icon-search" @click="search">搜索</el-button>
    </div>

    <tTable :columns="columns" :data="tableData" @handleSelectionChange="handleSelectionChange">
      <!-- 余额 -->
      <template v-slot:balance="slotProps">
        <span>￥{{slotProps.scope.row.balance}}</span>
      </template>

      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          @click="checkDetail(slotProps.scope.row.userAccountId)"
          type="primary"
          class="add-style"
          size="mini"
        >课程购买情况</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>

    <el-dialog title="已购课程" :visible.sync="dialogVisible" width="60%">
      <div>
        <tTable :columns="courseColumns" :data="courseList">
          <!-- 课程描述 -->
          <template v-slot:courseBrief="slotProps">
              <div class="course-des">{{slotProps.scope.row.courseBrief}}</div>
          </template>
        </tTable>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="add-style" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getInviteUser, getUserCourse } from "api/user";
import { formatDateTime } from "src/util/time.js";
import { baseUrl } from "src/config/env.js";

import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      tableData: [],
      courseList: [], //用户已购买课程列表
      searchData: "",
      dialogVisible: false,
      isSearch: false,

      total: -1,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "姓名" }
        },
        {
          attr: { prop: "phone", label: "电话" }
        },
        {
          slot: "balance",
          attr: { prop: "balance", label: "余额" }
        },
        {
          attr: { prop: "inviteCode", label: "机构码" }
        },
        {
          attr: { prop: "inviteName", label: "邀请人" }
        },
        {
          attr: { prop: "createTime", label: "注册时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "230" }
        }
      ],
      
      courseColumns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "courseName", label: "名称" }
        },
        {
          slot: "courseBrief",
          attr: { prop: "courseBrief", label: "课程描述" }
        },
        {
          attr: { prop: "effectiveTime", label: "购买日期" }
        },
        {
          attr: { prop: "endTime", label: "到期日" }
        }
      ]
    };
  },
  mounted() {
    this.getData(1);
  },
  components: { Pagination, tTable },
  methods: {
    deleteRow: function(index, data) {},
    search: function() {
      this.getData(1, this.searchData);
      this.isSearch = true;
    },
    handleCreate: function() {},
    getData(pageNumber, searchData) {
      getInviteUser(pageNumber, searchData).then(res => {
        this.total = res.totalElements;
        this.tableData = res.content.map(item => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
      });
    },
    checkDetail(id) {
      this.dialogVisible = true;
      getUserCourse(id).then(res => {
        this.courseList = res.map(item => {
          item.endTime = formatDateTime(item.endTime);
          item.effectiveTime = formatDateTime(item.effectiveTime);
          item.courseCover = baseUrl + "/" + item.courseCover;
          return item;
        });
      });
    },
    handleChange: function(pageNumber) {
      if (this.isSearch) {
        this.getData(pageNumber, this.searchData);
      } else {
        this.getData(pageNumber);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.filter-container {
  margin: 15px 0;
}

.course-des {
  width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
